<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>支付</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="css/mui.min.css" />
        <link rel="stylesheet" href="css/pay.css" />
    </head>

    <body>
        <hrader class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">第三方支付</h1>
        </hrader>
        <div class="mui-content">
            支付金额：
            <input id="jine" type="number" value="0.01" /> 元
            <div class="top oauth-area" id="testLogin">
                <input type="button" id="wxpay" class="weixin pay" value="微信支付" />
                <input type="button" id="alipay" class="zhifubao pay" value="支付宝支付" />
            </div>
        </div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell"> 支付方式: <span id="channel">支付宝</span> </li>
            <li class="mui-table-view-cell"> 订单号: <span id="bill_no">146486451845525158</span> </li>
            <li class="mui-table-view-cell"> 支付金额: <span id="total_fee">99元</span> </li>
            <li class="mui-table-view-cell"> 支付状态:<span id="status">未支付</span> </li>
            <textarea name="" id="status_msg" cols="20" rows="5"></textarea>
        </ul>
    </body>
</html>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/beecloud.js"></script>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能  
    });
    mui('.mui-content').on('tap', '.pay', function() { // 获取 点击效果微信还是支付平台
        var channel_id = null;
        switch(this.id) {
            case 'alipay':
                channel_id = 'ALI_APP';
                break;
            case 'wxpay':
                channel_id = 'WX_APP';
                break;
            default:
                break;
        }
        beecloudPay(channel_id);
        document.getElementById("channel").innerHTML = channel_id;
        document.getElementById("total_fee").innerHTML = document.getElementById('jine').value;
        document.getElementById("bill_no").innerHTML = beecloud.genBillNo();
    })

    function beecloudPay(bcChannel) {
        //因DCloud尚未申请银联账号，故支付宝、微信使用的是DCloud的appid，银联暂时使用BeeCloud的appid，开发者这里无需判断，直接写一个appid即可；
        var _appid = bcChannel == "UN_WEB" ? "c37d661d-7e61-49ea-96a5-68c34e83db3b" : "44f01a13-965f-4b27-ba9f-da678b47f3f5"
         * 构建支付参数
         * app_id: BeeCloud控制台上创建的APP的appid，必填 
         * title: 订单标题，32个字节，最长支持16个汉字；必填
         * total_fee: 支付金额，以分为单位，大于0的整数，必填
         * bill_no: 订单号，8~32位数字和/或字母组合,确保在商户系统中唯一，必填
         * optional: 扩展参数,可以传入任意数量的key/value对来补充对业务逻辑的需求;此参数会在webhook回调中返回; 选填
         * bill_timeout: 订单失效时间,必须为非零正整数，单位为秒，必须大于360。选填 
         */
        var payData = {
            app_id: _appid,
            channel: bcChannel,
            title: "DCloud项目捐赠",
            total_fee: document.getElementById('jine').value * 100,
            bill_no: beecloud.genBillNo(),
            optional: {
                'uerId': 'beecloud',
                'phone': '4006280728'
            },
            bill_timeout: 360,
            return_url: "http://www.dcloud.io/demo/pay" //wap支付成功后的回跳地址
        };
        /*    发起支付
         *  payData: 支付参数
         *  cbsuccess: 支付成功回调
         *  cberror: 支付失败回调
         */
        beecloud.payReq(payData, function(result) {
            document.getElementById("status").innerHTML = 'success';
            document.getElementById("status").style.color = 'green'
            document.getElementById("status_msg").innerHTML = "-------- 支付成功 --------" + "\n感谢您的支持,我们会继续努力完善产品";
            console.log(result);
        }, function(e) {
            document.getElementById("status").innerHTML = 'failed';
            document.getElementById("status").style.color = 'red'
            document.getElementById("status_msg").innerHTML = "-------- 支付失败 --------\n" + "错误码：" + e.code + '\n' + e.message;
        });
    }
</script>